import React, { Component } from "react";
import { bool } from "prop-types";

// 属性----props   状态----state
class App extends Component {
  obj = {
    showClick: true,
    text: "小明",
  };
  render() {
    return (
      <div>
        <div>
          页面一 要显示按钮
          <Swiper {...this.obj} />
        </div>
        <div>
          页面2 不显示按钮
          <Swiper showClick={false} />
        </div>
      </div>
    );
  }
}

class Swiper extends Component {
  static propTypes = {
    showClick: bool,
  };
  static defaultProps = {
    text: "默认文字",
  };
  state = {
    xxx: "xxxx",
  };
  render() {
    return (
      <div>
        <div>轮播</div>
        <div>{this.props.text}</div>
        {this.props.showClick && (
          <button onClick={() => (this.props.showClick = false)}>点击</button>
        )}
      </div>
    );
  }
}

// Swiper.propTypes = {
//   showClick: bool,
// };

// Swiper.defaultProps = {
//     text: "默认文字",
// }

// function Swiper(props) {
//   return (
//     <div>
//       <div>轮播</div>
//       <div>{props.text}</div>
//       {props.showClick && (
//         <button onClick={() => (props.showClick = false)}>点击</button>
//       )}
//     </div>
//   );
// }

export default App;
